<template>
    <div ref="charts" class="charts" > </div>
</template>

<script>
import * as echarts from "echarts"
export default {
    name: 'lineChart',
    mounted(){
        let lineChart=echarts.init(this.$refs.charts);
        lineChart.setOption({
            xAxis: {
              show:false,
              type: 'category',
            },
            yAxis: {
                show:false,
            },
            grid:{
                    top:10,
                    left:0,
                    right:0,
                    bottom:0
                },    
            series: 
              {
                type: 'line',
                data: [33,21,30,11,32,18,27,22,31,26],
                smooth: true,
                itemStyle:{
                    opacity:0
                },
                areaStyle:{
                    color:{
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                          offset: 0, color: 'purple' // 0% 处的颜色
                      }, {
                          offset: 0.8, color: '#fff' // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                    }
                },
                lineStyle:{
                    color:"purple"
                }
              }
            
        })
    }
}
</script>

<style scoped>
.charts{
    width: 100%;
    height: 100%;
}
</style>
